import { CalendarOutlined, FileSyncOutlined, SendOutlined } from "@ant-design/icons";
import { Button, Drawer, Input, InputProps, Space, Tooltip } from "antd";
import { ReactNode, useState } from "react";
import styles from "./index.module.less"
import VariableTempalte from "../VariableTemplate";

export interface PromptInputAreaProp extends InputProps {
  suffix?: ReactNode,
  handleSend?: (message: string) => void | Promise<any>,
  toolBoxComp?: ReactNode,
  inputProp?: any,
}

export default function PromptInputArea(props: PromptInputAreaProp) {
  const [content, setContent] = useState<string>("")
  const [open, setOpen] = useState<boolean>(false)
  const [templateLoading, setTemplteLoading] = useState<boolean>(false)

  const handleClickSend = () => {
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      props.handleSend && props.handleSend(content)
      setContent("")
  }

  const compProps: PromptInputAreaProp = {
    suffix: <SendOutlined
      className={styles['suffix']}
      onClick={() => handleClickSend()}
    />,

    inputProp: {},
    ...props
  }

  // 加载模板
  const loadTemplate = () => {
    setOpen(true)
    setTemplteLoading(true)
    setTimeout(() => {
      setTemplteLoading(false)
    }, 2 * 1000)
  }

  const handleClickTemplate = () => {
    console.log("加载模板")
    loadTemplate();
  }


  return <Space className={styles["input-area"]} direction="vertical">
      <div className={styles['tool-box']}>
        {compProps.toolBoxComp? compProps.toolBoxComp : <>
          <Tooltip title="模板">
            <Button type="text" onClick={handleClickTemplate}>
              <CalendarOutlined className={styles['tool-box-item']}/>
            </Button>
          </Tooltip>
          <Tooltip title="导出">
            <Button type="text">
              <FileSyncOutlined className={styles['tool-box-item']}/>
            </Button>
          </Tooltip>
        </>}
      </div>
      <Input 
        size="large"
        suffix={compProps.suffix}
        className={styles['prompt-input']}
        placeholder=""
        {...compProps.inputProp}
        // 为方便模板功能集成在这个组件中，该组件对上层作为非受控组件。（上层调用无法通过自身状态控制）
        value={content}
        onChange={(e) => {setContent(e.target.value)}}
        onPressEnter={() => {handleClickSend()}}
      />

      <Drawer
        title="历史模板"
        placement="right"
        closable={false}
        mask={false}
        open={open}
        extra={<Space>
            <Button onClick={()=>{setOpen(false)}}>关闭</Button>
          </Space>
        }
        // loading={templateLoading}
      >
        <VariableTempalte 
          textAreaProp={{autoSize: {minRows: 6, maxRows: 6}}} 
          title="示例模板"
          templateContent="我正在对${content1}这块内容的了解和深入，需要你重点结合${content2}进行展开，并给出关于这块知识的大纲"
          onClickFill={(msg) => {console.log("填入: ", msg); setContent(msg)}}
        >
        </VariableTempalte>
      </Drawer>
    </Space>
}